
@use "sass:string"; // 引入模块
@use "sass:math";
@use "./base.scss" as var;

@function createShadow($num) {
  $shadow: '10vw 10vh #{var.$color-white}'; // 定义一个变量
  @for $i from 1 through $num {
    $shadow: '#{$shadow}, #{math.random(100)}vw #{math.random(100)}vh #{var.$color-white}'; // 每次循环拼接num个阴影
  }
  @return string.unquote($shadow);
}

$layers: 4; // 层数
$count: 1000; // 阴影的数量
$duration: 1200s; // 动画时长
@for $i from 1 through $layers {
  $count: math.floor(calc($count / 2)) ;
  $duration: math.floor(calc($duration / 2)) ;
  // @debug '$count: #{$count}'; // 打印日志
  // @debug '$duration: #{$duration}';
  .layer#{$i} {
    $size: #{$i}px;

    position: fixed;
    width: $size;
    height: $size;
    left: 0;
    top: 0;
    border-radius: 50%;
    box-shadow: createShadow($count);
    animation: moveUp #{$duration} linear infinite;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 100vh;
      width: inherit; // 集成父元素
      height: inherit;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}

@keyframes moveUp {
  100% {
    transform: translateY(-100vh);
  }
}

